﻿
@{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>

@section scripts{
    <script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function() {
            var chat = $.connection.chatHub;
            chat.client.addNewMessageToPage = function(name, message) {
                $("#discussion").append(`<li><strong>${htmlEncode(name)}</strong>:${htmlEncode(message)}</li>`);
            };
            $("#displayname").val(prompt("Enter your name:", ""));
            $("#message").focus();
            $.connection.hub.start().done(function() {
                $("#sendmessage").click(function() {
                    chat.server.send($("#displayname").val(), $("#message").val());
                    $("#message").val("").focus();
                });
            });
        });

        function htmlEncode(value) {
            var encodedValue = $("<div />").text(value).html();
            return encodedValue;
        }
    </script>
}